﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="ZX.Web.UI.Controls.BasePage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="../template/matrix-1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../template/matrix-1/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="../template/matrix-1/css/fullcalendar.css" />
    <link rel="stylesheet" href="../template/matrix-1/css/matrix-style.css" />
    <link rel="stylesheet" href="../template/matrix-1/css/matrix-media.css" />
    <link href="../template/matrix-1//font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap/css/FinancialCockpit.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #sYear,#sYear1,#sYear2,#sReason,#sMonth
        {
            width:100px;
        }
        .span5
        {
            margin:1px;
        }
        
        table
        {
            width: 100%;
            border: 1px;
        }
        thead
        {
            border: 1px solid #ccc;
        }
        tr
        {
            height: 25px;
            border: 1px solid #ccc;
        }
        thead th
        {
            border: 1px solid #ccc;
            background: #e4e7e2;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            height: 17px;
            padding: 2px;
        }
        
        .tr_1
        {
            background-color: #f0ffff;
        }
        
        .tr_0
        {
            background-color: #fff;
        }
        
        .tab-pane div 
        {
            height:400px;
            overflow:auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
<div>
     <div class="widget-box">
          <div class="widget-title">
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#tab1">年</a></li>
              <li><a data-toggle="tab" href="#tab2">季</a></li>
              <li><a data-toggle="tab" href="#tab3">月</a></li>
            </ul>
          </div>
          <div class="widget-content tab-content">
            <div id="tab1" class="tab-pane active">
                <div id="g1"></div>
              </div>
            <div id="tab2" class="tab-pane">
                <div id="g2"></div>
            </div>
            <div id="tab3" class="tab-pane">
                 <div id="g3"></div>
            </div>
            </div>
          </div>
       </div>
  </form>
<%--<script src="/ExtendPage/template/matrix-1/js/jquery.min.js"type="text/javascript"></script> --%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="/Scripts/Highcharts/js/highcharts.js" type="text/javascript"></script>
<script src="/Scripts/Highcharts/js/highcharts-more.js" type="text/javascript"></script>
<script src="/ExtendPage/template/matrix-1/js/bootstrap.min.js"></script> 
<script src="/ExtendPage/template/matrix-1/js/jquery.ui.custom.js"></script> 
<script src="/ExtendPage/template/matrix-1/js/matrix.js"></script>
<script src="/Scripts/Jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
    var newGauge = function (container, titleText, planAmount, factAmount, unit) {
        $(container).highcharts({
            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: titleText    //'<span style="font-size:20px">' + titleText + '</span>' 
            },
            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
	                    [0, '#FFF'],
	                    [1, '#333']
	                ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
	                    [0, '#333'],
	                    [1, '#FFF']
	                ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },
            // the value axis
            yAxis: {
                min: 0,
                max: Math.max(planAmount, factAmount),  //planAmount,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: '目标: ' + '</br>' + planAmount + ' ' + unit //'万(元)'
                },
                plotBands: [{
                    from: 400,
                    to: 800,
                    color: '#55BF3B' // green
                }, {
                    from: 200,
                    to: 400,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 0,
                    to: 200,
                    color: '#DF5353' // red
                }]
            },
            series: [{
                name: '实际',
                data: factAmount,
                tooltip: {
                    valueSuffix: ' ' + unit  //''   //' 万'
                }
            }]
        });
    }

    newGauge("#g1", "TEST", 1500, [1379.0000], "万（元)");
    newGauge("#g2", "TEST", 1500, [1379.0000], "万（元)");
    newGauge("#g3", "TEST", 1500, [1379.0000], "万（元)");
</script>
</body>
</html>